<template>
	<view class="template-login">
		<navBar :placeholder="false" :isScroll="false" />
		<image class="login-bgc" src="/static/img/login/bgc.png" mode=""></image>
		<view class="login-head">
			<view class="">您好，</view>
			<view class="">欢迎使用微风记账小工具</view>
		</view>
		<view class="login-box">
			<view class="login-one" v-if="isOneLogin">
				<image src="/static/img/wf.png" mode=""></image>
				<!-- 				<button class="one-key" :open-type="isCheck ? 'getPhoneNumber' : ''" @click="getUserInfo">微信手机号一键登录</button>
				<view class="password-login" @click="cutLogin">手机号密码登录</view> -->
			</view>
			<view class="login-password">
				<!-- 				<u--form labelWidth="100" labelPosition="top" :labelStyle="{ 'font-weight': 800, 'font-size': '36rpx', color: '#033333' }" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="手机号" prop="username" borderBottom>
						<u--input placeholder="请输入你的手机号" v-model="form.username" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" borderBottom>
						<u--input placeholder="请输入你的密码" type="password" v-model="form.password" pl border="none"></u--input>
						<view class="forget zdy-flex zdy-flex-align-center" slot="right">
							<image src="/static/img/login/wjmm.png" mode=""></image>
							<span>忘记密码？</span>
						</view>
					</u-form-item>
				</u--form> -->
				<view class="password-type">
					<!-- 					<button class="one-key" @click="submitForm">登录</button>
					<view>OR</view> -->
					<!-- open-type="chooseAvatar" -->
					<!-- <button open-type="chooseAvatar" class="one-key" @chooseavatar="getUserInfo">微信一键登录</button> -->
					<button class="one-key" @click="getUserInfo">微信一键登录</button>
				</view>
				<!-- 				<view class="goBack" @click="homePage">
					<text style="color: #ccc">回到首页</text>
					<uni-icons type="forward" size="14" color="#ccc"></uni-icons>
				</view> -->
			</view>
		</view>
		<view class="privacy zdy-flex zdy-flex-align-center">
			<view class="" @click="isCheck = !isCheck" style="padding: 25rpx; font-size: 0">
				<image :src="isCheck ? '/static/img/login/actived.png' : '/static/img/login/noActived.png'" mode=""></image>
			</view>
			<view class="">
				我已阅读
				<text @click="privacy('user')">用户协议</text>
				和
				<text @click="privacy('privacy ')">《隐私协议》</text>
				,并理解其中含义
			</view>
		</view>
	</view>
</template>

<script>
import { login, getOpenid } from '@/api/user.js';
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			isCheck: false,
			isOneLogin: true,
			form: {
				username: '',
				password: '',
				openid: uni.getStorageSync('openid')
			},
			rules: {
				username: [
					{
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				],
				password: {
					required: true,
					message: '请填写密码',
					trigger: 'blur'
				}
			}
		};
	},
	methods: {
		...mapMutations('userInfo', ['setUserInfo']),
		//切换登录方式
		cutLogin() {
			this.isOneLogin = false;
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules);
			});
		},
		pass() {
			if (!this.isCheck) {
				uni.showToast({
					icon: 'none',
					title: '请先查看隐私协议！'
				});
				return false;
			} else {
				return true;
			}
		},
		//密码登录
		submitForm() {
			this.$Message('暂未开通，请先用微信一键登录');
			return;
			if (this.pass()) {
				this.$refs.uForm
					.validate()
					.then((res) => {
						this.login();
					})
					.catch((errors) => {
						uni.$u.toast(errors, '校验失败');
					});
			}
		},
		//微信一键登录
		getUserInfo() {
			if (!this.isCheck) {
				this.$Message('请先阅读隐私协议');
				return;
			}
			uni.showLoading();
			const that = this;
			uni.login({
				success: function (res) {
					getOpenid(res.code).then((codes) => {
						uni.hideLoading();
						uni.getUserInfo({
							desc: '获取用户信息，进行登录',
							success: (res) => {
								//调用登录函数
								that.getLogin({ ...res.userInfo, openid: codes.openid });
							}
						});
					});
				}
			});
		},
		// 微信登录
		getLogin(userInfo) {
			console.log(userInfo, 'userInfo');
			this.$cloudRequest('userFun', { type: 'login', ...userInfo }).then((res) => {
				console.log(res, 'resresresres');
				uni.setStorageSync('userInfo', res);
				this.$Message('登录成功');
				setTimeout(() => {
					// 跳转首页
					uni.reLaunch({
						url: '/bill/myBill'
					});
				}, 1500);
			});
		},
		login() {
			uni.showLoading();
			login(this.form)
				.then((res) => {
					this.setUserInfo(res);
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '登录成功'
					});
					//延时2s跳转到返回上一页
					setTimeout(() => {
						if (getCurrentPages().length > 1) {
							uni.navigateBack();
						} else {
							uni.switchTab({
								url: '/pages/tab/home'
							});
						}
					}, 2000);
				})
				.catch((err) => {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: err.detail || 'Unknown error'
					});
				});
		},
		// 用户协议
		privacy(type) {
			uni.navigateTo({
				url: '/userInfo/userAgreement?type=' + type
			});
		},
		homePage() {
			uni.switchTab({
				url: '/pages/tab/home'
			});
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
	overflow: hidden;
}
</style>
<style scoped lang="scss">
.login-bgc {
	width: 100%;
	height: 640rpx;
}

.login-head {
	position: absolute;
	left: 50rpx;
	top: 235rpx;
	font-family: Alimama ShuHeiTi;
	font-weight: bold;
	font-size: 40rpx;
	color: #333333;
	line-height: 60rpx;
}

.login-box {
	position: relative;
	margin-top: -255rpx;
	height: calc(100vh - 385rpx);
	width: 100%;
	background: linear-gradient(180deg, #e5f7f6 0%, #eefffe 100%);
	border-radius: 56rpx 56rpx 0rpx 0rpx;
	.one-key {
		width: 100%;
		padding: 30rpx 0;
		margin-bottom: 30rpx;
		background: #85dcd6;
		border-radius: 16rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #033333;
	}
	.login-one {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 170rpx 75rpx 0;

		image {
			margin-bottom: 50rpx;
			width: 260rpx;
			height: 260rpx;
			border-radius: 50%;
		}

		.password-login {
			text-align: center;
			font-weight: 500;
			color: #666666;
		}
	}
	.login-password {
		padding: 65rpx 50rpx;
		.forget {
			font-size: 30rpx;
			color: #149e99;
			image {
				margin-right: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.password-type {
			text-align: center;
			margin: 60rpx 0;
			view {
				font-weight: 400;
				font-size: 30rpx;
				color: #999999;
				margin: 50rpx 0;
			}
			.one-key:last-of-type {
				color: #149e99;
			}
		}
		.goBack {
			color: #333333;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.privacy {
	position: fixed;
	width: max-content;
	bottom: 80rpx;
	left: 50%;
	transform: translateX(-50%);

	image {
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
	}

	font-size: 22rpx;
	color: #666666;
	letter-spacing: 2rpx;

	text {
		font-weight: bold;
		color: #000000;
	}
}
</style>
